<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    ref="multipleTable"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width></el-table-column>
    <el-table-column prop="id" label="套餐ID" width header-align="center" align="center" height="40"></el-table-column>
    <el-table-column prop="name" label="套餐名称" header-align="center" align="center"></el-table-column>
    <el-table-column prop="image" label="套餐图片" header-align="center" align="center"></el-table-column>
    <el-table-column prop="type" label="套餐类型" header-align="center" align="center"></el-table-column>
    <el-table-column prop="region" label="适用院区" header-align="center" align="center"></el-table-column>
    <el-table-column prop="price" label="套餐价格(元)" header-align="center" align="center"></el-table-column>
    <el-table-column prop="project" label="套餐项目" width="200" header-align="center" align="center"></el-table-column>

    <el-table-column label="套餐状态" width="180" header-align="center" align="center">
      <template slot-scope="scope">
        <el-switch v-model="scope.row.state" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
      </template>
    </el-table-column>

    <el-table-column label="操作" width="180" header-align="center" align="center">
      <template slot-scope="scope">
        <el-button size="mini" @click="handleModify(scope.row)">编辑</el-button>
        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { delData } from "../../../api/physicaAPI";
import { batchDel } from "../../../api/physicaAPI";
import eventBus from "../../../utils/busEvent";
export default {
  mounted() {
    eventBus.$on("removeAllTransfer", this.removeAll);
  },
  data() {
    return {
      multipleSelection: []
    };
  },
  props: ["tableData"],
  methods: {
    handleModify(row) {
      eventBus.$emit("modifyTransfer", row);
    },
    handleDelete(row) {
      delData(row).then(res => {
        if (res.code == 200) this.$emit("resetTable");
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(this.multipleSelection);
    },
    removeAll() {
      let IDs = "";
      this.multipleSelection.forEach((item, index) => {
        IDs += item.ID + ",";
      });
      batchDel({ ID: IDs }).then(res => {
        if (res.code == 200) this.$emit("resetTable");
      });
    }
  }
};
</script>

<style>
.has-gutter {
  line-height: 18px;
}
</style>